<template>
  <div>
    <el-button color="#FFB805" type="primary" @click="dialogTableVisible = true"
      :disabled="!this.hasAuth('sys:sysParam:companyInfo:add')"
      >添加</el-button
    >

    <el-dialog v-model="dialogTableVisible" title="单位信息添加" top="2vh">
      <el-form
        :model="companyInfo"
        :label-width="80"
        label-position="left"
        ref="companyInfo"
        :rules="rules"
      >
        <el-form-item label="公司名称" prop="companyName">
          <el-input
            v-model="companyInfo.companyName"
            placeholder="请输入公司名称"
          />
        </el-form-item>
        <el-form-item label="公司地址" prop="companyAddress">
          <el-input
            type="text"
            v-model="companyInfo.companyAddress"
            placeholder="请输入公司地址"
          />
        </el-form-item>
        <el-form-item label="公司法人" prop="corporation">
          <el-input
            type="text"
            v-model="companyInfo.corporation"
            placeholder="请输入公司法人名称"
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="phoneNum">
          <el-input
            type="text"
            v-model="companyInfo.phoneNum"
            placeholder="请输入公司联系电话"
          />
        </el-form-item>
        <el-form-item label="税号" prop="taxNumber">
          <el-input
            type="text"
            v-model="companyInfo.taxNumber"
            placeholder="请输入公司税号"
          />
        </el-form-item>
        <el-form-item label="开户行" prop="accountBank">
          <el-input
            type="text"
            v-model="companyInfo.accountBank"
            placeholder="请输入开户银行名称"
          />
        </el-form-item>
        <el-form-item label="卡号" prop="accountNum">
          <el-input
            type="text"
            v-model="companyInfo.accountNum"
            placeholder="请输入开户银行账号"
          />
        </el-form-item>

        <el-form-item label="添加附件" prop="file">
          <el-upload
            class="upload-demo"
            :before-remove="beforeRemove"
            :on-change="fileChangeFunc"
            drag
            action=""
            multiple
            name="file"
            style="float: left"
            :file-list="fileList"
            :auto-upload="false"
          >
            <el-icon class="el-icon--upload"><Document /></el-icon>
            <div class="el-upload__text">拖放文件上传 或 <em>点击上传</em></div>
            <template #tip>
              <div class="el-upload__tip">
                单个文件最大为50MB,总上传大小为100MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="submitForm">添加</el-button>
          <el-button type="primary" @click="this.$refs.companyInfo.resetFields()"
            >重置</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { Document } from "@element-plus/icons";
import axios from "../../../utils/request";
import { ElNotification } from "element-plus";
export default {
  components: { Document },
  inject: ["reload"],
  data() {
    return {
      companyInfo: {},
      dialogTableVisible: false,
      fileList: [],
      files: [],
      rules: {
        companyName: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
        ],
        companyAddress: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
        ],
        corporation: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
        ],
        phoneNum: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
        ],
        taxNumber: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
          { max: 20, message: "最大长度不超过20个字符", trigger: "blur" },
        ],
        accountBank: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
        ],
        accountNum: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    /**
     * 表单文件上传函数
     */
    beforeRemove(file, fileList) {
      console.log(fileList);
      var re = this.$confirm(`是否删除文件 ${file.name} ?`)
        .then(() => {
          this.files.splice(this.files.indexOf(file), 1);
        })
        .catch(() => {
          return false;
        });
      return re;
    },
    fileChangeFunc(file, fileList) {
      this.files.push(file);
    },
    hasAuth(perm) {
      var authority = this.$store.state.menus.permList;
      return authority.indexOf(perm) > -1;
    },

    /**
     * 表单数据提交函数
     */
    submitForm() {
      this.$refs.companyInfo.validate((valid) => {
        if (valid) {
          var formData = new window.FormData();
          formData.append(
            "companyInfo",
            new Blob([JSON.stringify(this.companyInfo)], {
              type: "application/json",
            })
          );
          if (this.files.length != 0) {
            this.files.forEach((data) => {
              formData.append("files", data.raw);
            });
          }

          axios({
            url: "/CompanyInfos/add",
            method: "post",
            headers: { "Content-Type": "multipart/form-data" },
            data: formData,
          }).then((res) => {
            if (res.data.status === 200) {
              ElNotification({
                message: res.data.message,
                type: "success",
                duration: "1500",
              });
            }
            this.reload();
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>